<template>
    <Card dis-hover :bordered="false">
        <Button class="ivu-mb-8" type="primary" @click="handleEdit(false)">新增</Button>
        <Table :columns="columns" :data="data" :loading="loading">
            <template slot-scope="{ row }" slot="action">
                <a @click="handleProject(row)">项目</a>
                <Divider type="vertical"/>
                <a @click="handleChannel(row)">渠道</a>
                <Divider type="vertical"/>
                <a @click="handleEdit(row)">编辑</a>
                <Divider type="vertical"/>
                <a @click="handlePersonnel(row)">人员</a>
            </template>
            <template slot-scope="{ row }" slot="project">
                <template v-for="(item,index) in row.project_str">
                    <Tag type="border" :key="index" v-if="item">{{item}}</Tag>
                </template>
            </template>
            <template slot-scope="{ row }" slot="channel">
                {{row.count_channel}}个渠道
            </template>
            <template slot-scope="{ row }" slot="status">
                <Tag color="default">{{row.status_str}}</Tag>
            </template>
        </Table>
        <Project ref="Project" @askData="askData"/>
        <Channel ref="Channel" @askData="askData"/>
        <Edit ref="Edit" @askData="askData"/>
        <Personnel ref="Personnel" @askData="askData"/>
    </Card>
</template>
<script>
    import Project from './Project';
    import Channel from './Channel';
    import Edit from './Edit';
    import Personnel from './Personnel';
    import { netsettingindex } from '@/api/hqapi';
    export default {
        name: 'toConfigure',
        components: { Project, Channel, Edit, Personnel },
        data () {
            return {
                columns: [
                    { title: '营销中心', key: 'name', minWidth: 120, ellipsis: true, tooltip: true },
                    { title: '下属项目', slot: 'project', minWidth: 120 },
                    // { title: '配置渠道', slot: 'channel', width: 120 },
                    { title: '状态', slot: 'status', width: 90 },
                    { title: '人员', key: 'count_member', width: 80 },
                    { title: '操作', slot: 'action', width: 210 }
                ],
                data: [],
                loading: false
            };
        },
        mounted () {
            this.initial()
        },
        methods: {
            initial () {
                this.askData()
            },
            askData () {
                this.loading = true
                netsettingindex().then(res => {
                    this.data = res
                    this.loading = false
                })
            },
            handleProject (row) {
                this.$refs.Project.initial(row)
            },
            handleChannel (row) {
                this.$refs.Channel.initial(row)
            },
            handleEdit (row) {
                this.$refs.Edit.initial(row)
            },
            handlePersonnel (row) {
                this.$refs.Personnel.initial(row)
            }
        }
    }
</script>
